{% extends 'admin/adminbase.html' %}
{% load static %}

{% block rightside %}
<div class="ui grid">
    <div class="row">
        <button class="ui teal labeled icon button add-column"><i class="add icon"></i> 添加新栏目</button>
    </div>
    <div class="ui list">
        <div class="item">
            <i class="folder icon"></i>
            <div class="content">
                <div class="header">栏目1</div>
                <div class="list">
                    <div class="item">
                        <i class="folder icon"></i>
                        <div class="content">
                            <div class="header">栏目1-1</div>
                            <div class="list">
                                <div class="item">
                                    <i class="file icon"></i>文件1-1.1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <i class="file icon"></i>文件1.1
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <i class="folder icon"></i>
            <div class="content">
                <div class="header">栏目2 </div>
                <div class="list">
                    <div class="item">
                        <i class="file icon"></i>文件2
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui coupled first modal">
    <i class="close icon"></i>
    <div class="header">添加栏目</div>
    <div class="image content">
        <div class="description">
            
        </div>
    </div>
    <div class="actions">
        <div class="ui confirm button">取消</div>
        <div class="ui doadd button">添加</div>
    </div>
</div>
<div class="ui coupled second modal">
    <i class="close icon"></i>
    <div class="header">添加栏目</div>
    <div class="image content">
        <div class="description">
        </div>
    </div>
    <div class="actions">
        <div class="ui confirm button">确定</div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function(){
    $(".coupled.modal").modal({allowMultiple:false});
    $(".second.modal").modal("attach events",".first.modal .doadd.button");
    $(".add-column").on("click",function(){
        $(".first.modal").modal("show");
    });
    $(".confirm.button").on("click",function(){
        $(this).parent().parent().modal("toggle");
    });
});
</script>
{% endblock %}
